<template>
  <div class="huayu">
    <form action="/">
      <van-search v-model="value" placeholder="请输入搜索关键词" show-action />
    </form>
    <h6>热门搜索</h6>
    <van-grid :column-num="5" :gutter="10">
      <van-grid-item text="玫瑰" />
      <van-grid-item text="百合" />
      <van-grid-item text="太阳花" />
      <van-grid-item text="康乃馨" />
      <van-grid-item text="扶郎" />
      <van-grid-item text="向日葵" />
      <van-grid-item text="满天星" />
      <van-grid-item text="郁金香" />
      <van-grid-item text="马蹄莲" />
      <van-grid-item text="薰衣草"/>
    </van-grid>
    <div class="zhezhao-photo">
      <div class="photo-one met">
        <img
          src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2814565665,3965416372&fm=26&gp=0.jpg"
        />

        <div>
          <h2>花材</h2>
          <p>一秒读懂花的语言></p>
        </div>
      </div>
      <div class="phonto-one num">
        <img
          src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2814565665,3965416372&fm=26&gp=0.jpg"
        />
        <div>
          <h2>枝数</h2>
          <p>了解所有枝数的寓意></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      value:'',
    }

  }
}
</script>
<style scoped>
h2{font-size:0.3rem;font-weight:normal}
p{font-size:0.1rem}
h6{height:0.2rem;font-size:0.1rem;color:#666;font-weight:normal;line-height: 0.2rem;margin-bottom: 0.1rem}
  .huayu>div img{
    width:1.7rem;
    height:2rem
  }
  .zhezhao-photo{
    padding:0.1rem 0.1rem;
    display:flex;
    justify-content:space-between;
    position: relative;
  }
  .met div h2,p{
    color:#fff
  }
  .num div h2,p{
    color:#fff
  }
    .met div{
    background:rgba(0,0,0,0.3);
    width:1.7rem;
    height:2rem;
    position:absolute;
    left:0.1rem;top:0.1rem;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
    }
    .num div{
     right:0.1rem;top:0.1rem;
    background:rgba(0,0,0,0.3);
    width:1.7rem;
    height:2rem;
    position:absolute;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
    }
</style>
